import React from 'react';

interface IProps {
  data: IPracticeList;
}

const QuestionTypeMap: ITypeMap = {
  fill: '填空',
  code: '编程',
  qa: '问答',
};
// 填空题组件
export default function Fill({ data }: IProps) {
  return (
    <div className="fill">
      <section className="title">
        <span>{QuestionTypeMap[data.questionType]}</span>
        <div>{data.title}</div>
      </section>
      {/* 除了上面的题干，还可能有一段代码 */}
      {/* dangerouslySetInnerHTML 是react里面用来给一个元素添加 html 代码内容的，相当是vue里面的 v-html */}
      <div dangerouslySetInnerHTML={{ __html: data.content }}></div>

      {/* 在下面渲染题目的答案的时候，要使用的也是 html 内容 */}
      <section className="analysis">
        <p>参考答案</p>
        <div dangerouslySetInnerHTML={{ __html: data.answer }}></div>
      </section>
    </div>
  );
}
